import {createApp} from 'vue'
import App from './App.vue'
import {createRouter, createWebHashHistory} from 'vue-router'
import {createPinia} from 'pinia'
import routers from './routers'
import VueTippy from 'vue-tippy'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
import VueContext from '@madogai/vue-context/dist/vue-context';
import VModal from './vendor/vue-js-modal'
import './global.css'
import './wfc.css'
import './assets/fonts/icomoon/style.css'
import "./assets/iconfont/iconfont.css"; 
import store from "./store";
import visibility from './vendor/vue-visibility-change';
import {getItem} from "./ui/util/storageHelper";
import {createI18n} from 'vue-i18n'
import Notifications from '@kyvg/vue3-notification'
import Alert from "./ui/common/Alert.js";
import Picker from "./ui/common/Picker";
import Forward from "./ui/common/Forward";
import Voip from "./ui/common/Voip";
import blockVue from "./ui/common/blockVue";
import VirtualList from "vue3-virtual-scroll-list";
import mitt from 'mitt'
import {plugin as CoolLightBox} from "./vendor/vue-cool-lightbox";
// Vue.config.productionTip = false
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(CoolLightBox)
// init
{
    store.init(true);
}
// init end
app.use(
    VueTippy,
    // optional
    {
        directive: 'tippy', // => v-tippy
        component: 'tippy', // => <tippy/>
        componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
        defaultProps: {
            theme: 'light',
            placement: 'auto-end',
            allowHTML: true,
        }, // => Global default options * see all props
    }
)
import {mqttClient, emitter} from '@/hooks/chat/mqtt'
app.config.globalProperties.$emitter = emitter
app.config.globalProperties.$mqttClient = mqttClient
app.use(VueContext);
app.component("vue-context", VueContext)
app.component('virtual-list', VirtualList);
app.component("Blockies", blockVue);
app.use(VModal);

app.use(visibility);

app.use(Alert)
app.use(Picker)
app.use(Forward)
app.use(Voip)

const i18n = createI18n({
    // 使用localStorage存储语言状态是为了保证页面刷新之后还是保持原来选择的语言状态
    locale: getItem('lang') ? getItem('lang') : 'zh-CN', // 定义默认语言为中文
    allowComposition: true,
    messages: {
        'zh-CN': require('@/assets/lang/zh-CN.json'),
        'zh-TW': require('@/assets/lang/zh-TW.json'),
        'en': require('@/assets/lang/en.json')
    }
})
app.use(i18n)

app.use(Notifications)
const router = createRouter({
    // mode: 'hash',
    history: createWebHashHistory(),
    routes: routers,
})
app.use(router)
app.config.globalProperties.$router = router

const eventBus = mitt()
eventBus.$on = eventBus.on
eventBus.$off = eventBus.off
eventBus.$emit = eventBus.emit
app.config.globalProperties.$eventBus = eventBus

// app.prototype.xss = xss;
// app.prototype.xssOptions = () => {
//     let whiteList = xss.getDefaultWhiteList();
//     window.__whiteList = whiteList;
//     //xss 处理的时候，默认会将 img 便签的class属性去除，导致 emoji 表情显示太大
//     //这儿配置保留 img 标签的style、class、src、alt、id 属性
//     whiteList.img = ["style", "class", "src", "alt", "id"];
//     return {
//         whiteList
//     };
// };

app.config.globalProperties.$set = (obj, key, value) => obj[key] = value

app.mount('#app')
